/*
 * 精英数据大盘
 * @Author: along
 * @Date: 2020-05-18
 */
<template>
    <div class="container schoolDataAnalusis">
        <!-- 单独模块权限暂无需配置 -->
        <div class="container-box">
            <div v-if="true">
                <!-- 校园精英大盘 -->
                <div class="contaier-box-wrap">
                    <shopHead
                        :title="elite.elite_market"
                        :elite=" 'elite' "
                        style="width: 300px"
                    />
                    <div style="display: flex">
                        <div
                            class="container-wrap-right"
                            style="display: flex;align-items:center;margin-right: 24px"
                        >
                            <p style="margin-right: 5px; color:#333">选择省市:</p>
                            <el-cascader
                                v-model="city"
                                :options="cityList"
                                :props="{ expandTrigger: 'hover' }"
                                @change="handleChange(1)"
                                size="mini"
                                placeholder="不限"
                            />
                        </div>
                        <div class="container-time">
                            <p class="container-time-text">选择日期:</p>
                            <el-date-picker
                                v-model="elite_filter.date"
                                type="datetime"
                                placeholder="选择日期时间"
                                :disabled="elite_filter.date_slot !== ''"
                                @change="fnChangeDate(1)"
                                :clearable="true"
                                size="small"
                            />
                        </div>
                        <el-button
                            size="small"
                            type="primary"
                            :style="{width: '100px', height: '32px', marginLeft: '24px'}"
                            @click="fnExportSchooldData()"
                        >
                            导出
                        </el-button>
                    </div>
                </div>
                <div class="container-box-content">
                    <div class="conatiner-content-list">
                        <p class="container-list-title">校园精英总数</p>
                        <p class="container-list-number">{{ eliteCount.select['agent_count'] }}<span class="container-list-desc">人</span></p>
                        <p
                            class="container-list-esat"
                            v-if="isNowDay"
                        />
                        <p
                            class="container-list-prev"
                            v-if="isNowDay"
                        >昨日:{{ eliteCount.yesterday['agent_count'] }}</p>
                    </div>
                    <div class="conatiner-content-list">
                        <p class="container-list-title">覆盖学校总数</p>
                        <p class="container-list-number">{{ eliteCount.select['school_count'] }}<span class="container-list-desc">所</span></p>
                        <p class="container-list-esat"/>
                        <p class="container-list-prev">昨日:{{ eliteCount.yesterday['school_count'] }}</p>
                    </div>
                </div>
                <!-- 精英覆盖的学校 -->
                <div class="container-cover">
                    <div class="container-wrap-header">
                        <p class="container-cover-title">精英覆盖的学校</p>
                    </div>
                    <el-table
                        :data="eliteList"
                        max-height="400px"
                        style="width: 100%;"
                        border
                    >
                        <el-table-column
                            label="序号"
                            align="center"
                            type="index"
                        />
                        <el-table-column
                            prop="school_name"
                            label="学校名称"
                            align="center"
                            show-overflow-tooltip
                            :formatter="emptyFormatter"
                        />
                        <el-table-column
                            prop="province_name"
                            label="学校所在省市"
                            align="center"
                            show-overflow-tooltip
                            :formatter="emptyFormatter"
                        >
                            <template slot-scope="scope">
                                {{ scope.row.province_name + ' ' + scope.row.city_name }}
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="join_time"
                            label="合作时间"
                            align="center"
                            show-overflow-tooltip
                            :formatter="emptyFormatter"
                        >
                            <template slot-scope="scope">
                                {{ scope.row.join_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm') }}
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="agent_count"
                            label="学校精英总数"
                            align="center"
                            show-overflow-tooltip
                            :formatter="emptyFormatter"
                        />
                        <el-table-column
                            prop="increase_agent_count"
                            label="新增精英数"
                            align="center"
                            show-overflow-tooltip
                            :formatter="emptyFormatter"
                        />
                    </el-table>
                    <div
                        class="pagination-wrapper clearfix"
                    >
                        <el-pagination
                            background
                            layout="total, prev, pager, next"
                            :current-page.sync="page.now_page"
                            :total="page.total_count"
                            :page-size="page.page_size"
                            @current-change="getSchoolCoveList"
                        />
                    </div>
                </div>
                <!-- 占位 -->
                <div style="width:100%;height:12px;background:#F0F2F5"/>
            </div>
            <div v-if="true">
                <!-- 精英等级数据 -->
                <div class="contaier-box-wrap">
                    <shopHead
                        :title="elite.grand"
                        :elite=" 'elite' "
                    />
                    <div class="container-time">
                        <p class="container-time-text">选择日期:</p>
                        <el-date-picker
                            v-model="grand_filter.date"
                            type="datetime"
                            placeholder="选择日期时间"
                            :disabled="grand_filter.date_slot !== ''"
                            @change="fnChangeDate(3)"
                            :clearable="false"
                            size="small"
                        />
                    </div>
                </div>
                <div class="zd-data">
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">L0精英总数</p>
                        </div>
                        <div class="zd-content">{{ grandList.L0 ? grandList.L0 : 0 }}<span class="zd-content-text">人</span></div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">L1精英总数</p>
                        </div>
                        <div class="zd-content">{{ grandList.L1 ? grandList.L1 : 0 }}<span class="zd-content-text">人</span></div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">L2精英总数</p>
                        </div>
                        <div class="zd-content">{{ grandList.L2 ? grandList.L2 : 0 }}<span class="zd-content-text">人</span></div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">L3精英总数</p>
                        </div>
                        <div class="zd-content">{{ grandList.L3 ? grandList.L3 : 0 }}<span class="zd-content-text">人</span></div>
                    </div>
                    <div style="width:98%;border-top: 1px #F1F3F6 solid;margin-top:50px;margin-left: 1%"/>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">L4精英总数</p>
                        </div>
                        <div class="zd-content">{{ grandList.L4 ? grandList.L4: 0 }}<span class="zd-content-text">人</span></div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">L5精英总数</p>
                        </div>
                        <div class="zd-content">{{ grandList.L5 ? grandList.L5 : 0 }}<span class="zd-content-text">人</span></div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">L6精英总数</p>
                        </div>
                        <div class="zd-content">{{ grandList.L6 ? grandList.L6 : 0 }}<span class="zd-content-text">人</span></div>
                    </div>
                </div>
                <!-- 占位 -->
                <div style="width:100%;height:12px;background:#F0F2F5"/>
                <!-- 精英各个等级新增数据 -->
                <div class="contaier-box-wrap">
                    <p style="font-size:16px;color:#333;font-weight:500">精英各个等级新增数据</p>
                    <div class="container-time">
                        <p class="container-time-text">选择日期:</p>
                        <el-date-picker
                            v-model="each_grand_filter.date"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :default-time="['00:00:00', '23:59:59']"
                            size="small"
                            @change="fnFilterData(1)"
                        />
                    </div>
                </div>
                <div class="zd-data">
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">L0精英总数</p>
                        </div>
                        <div class="zd-content">{{ eachGrandList.L0 ? eachGrandList.L0 : 0 }}<span class="zd-content-text">人</span></div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">L1精英总数</p>
                        </div>
                        <div class="zd-content">{{ eachGrandList.L1 ? eachGrandList.L1 : 0 }}<span class="zd-content-text">人</span></div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">L2精英总数</p>
                        </div>
                        <div class="zd-content">{{ eachGrandList.L2 ? eachGrandList.L2 : 0 }}<span class="zd-content-text">人</span></div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">L3精英总数</p>
                        </div>
                        <div class="zd-content">{{ eachGrandList.L3 ? eachGrandList.L3 : 0 }}<span class="zd-content-text">人</span></div>
                    </div>
                    <div style="width:98%;border-top: 1px #F1F3F6 solid;margin-top:50px;margin-left: 1%"/>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">L4精英总数</p>
                        </div>
                        <div class="zd-content">{{ eachGrandList.L4 ? eachGrandList.L4 : 0 }}<span class="zd-content-text">人</span></div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">L5精英总数</p>
                        </div>
                        <div class="zd-content">{{ eachGrandList.L5 ? eachGrandList.L5 : 0 }}<span class="zd-content-text">人</span></div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">L6精英总数</p>
                        </div>
                        <div class="zd-content">{{ eachGrandList.L6 ? eachGrandList.L6 : 0 }}<span class="zd-content-text">人</span></div>
                    </div>
                </div>
                <!-- 占位 -->
                <div style="width:100%;height:12px;background:#F0F2F5"/>
            </div>
            <div v-if="true">
                <div class="contaier-box-wrap">
                    <shopHead
                        :title="elite.addSchoolNumber"
                        :elite=" 'elite' "
                    />
                </div>
                <!-- 新增数据 -->
                <div class="container-add">
                    <div class="container-add-wrap">
                        <p class="container-add-title">新增校园精英总数</p>
                        <div class="container-add-right">
                            <el-date-picker
                                v-model="add_elite_filter.date"
                                type="datetime"
                                placeholder="选择日期时间"
                                :disabled="add_elite_filter.date_slot !== ''"
                                @change="fnChangeDate(2)"
                                :clearable="false"
                                size="small"
                            />
                            <el-select
                                v-model="add_elite_filter.date_slot"
                                placeholder="时间段"
                                size="small"
                                style="width: 88px;marginLeft:5px"
                                @change="fnGetDate(2)"
                            >
                                <el-option
                                    v-for="item in dateList"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"/>
                            </el-select>
                        </div>
                    </div>
                    <div style="display:flex;width:100%">
                        <div class="container-number">
                            <div class="container-box-content">
                                <div class="conatiner-content-list">
                                    <!-- {{ JSON.stringify(addEliteObject) }} -->
                                    <p class="container-list-title">新增精英数</p>
                                    <p class="container-list-number">{{ addEliteObject.select['agent_count'] }}<span class="container-list-desc">人</span></p>
                                    <p class="container-list-esat"/>
                                    <p class="container-list-prev">昨日:{{ addEliteObject.yesterday['agent_count'] }}</p>
                                </div>
                                <div class="container-line"/>
                                <div class="conatiner-content-list">
                                    <p class="container-list-title">新增学校数</p>
                                    <p class="container-list-number">{{ addEliteObject.select['school_count'] }}<span class="container-list-desc">所</span></p>
                                    <p class="container-list-esat"/>
                                    <p class="container-list-prev">昨日:{{ addEliteObject.yesterday['school_count'] }}所</p>
                                </div>
                            </div>
                        </div>
                        <div class="container-desc">
                            <div class="container-desc-head">
                                <p class="container-desc-title">新增学校详情</p>
                                <div class="container-wrap-right">
                                    <p style="margin-right: 5px; color:#333">选择省市:</p>
                                    <el-cascader
                                        v-model="add_city"
                                        :options="cityList"
                                        :props="{ expandTrigger: 'hover' }"
                                        @change="handleChange(2)"
                                        size="mini"
                                        placeholder="不限"
                                    />
                                </div>
                            </div>
                            <el-table
                                :data="addEliteList"
                                height="250px"
                                max-height="270px"
                                style="width: 100%;"
                                border
                            >
                                <el-table-column
                                    label="序号"
                                    align="center"
                                    type="index"
                                />
                                <el-table-column
                                    prop="school_name"
                                    label="学校名称"
                                    align="center"
                                    show-overflow-tooltip
                                    :formatter="emptyFormatter"
                                />
                                <el-table-column
                                    prop="province_name"
                                    label="学校所在省市"
                                    align="center"
                                    show-overflow-tooltip
                                    :formatter="emptyFormatter"
                                >
                                    <template slot-scope="scope">
                                        {{ scope.row.province_name + ' ' + scope.row.city_name }}
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    prop="agent_count"
                                    label="精英总数"
                                    align="center"
                                    show-overflow-tooltip
                                    :formatter="emptyFormatter"
                                />
                            </el-table>
                            <div
                                class="pagination-wrapper clearfix"
                            >
                                <el-pagination
                                    background
                                    layout="total, prev, pager, next"
                                    :current-page.sync="add_page.now_page"
                                    :total="add_page.total_count"
                                    :page-size="add_page.page_size"
                                    @current-change="getSchoolCoveDesc"
                                />
                            </div>
                        </div>
                    </div>
                </div>
                <div style="width:100%;height:12px;background:#F0F2F5"/>
            </div>
            <div v-if="true">
                <!-- 精英等级数据 -->
                <div class="contaier-box-wrap">
                    <shopHead
                        :title="elite.fans"
                        :elite=" 'elite' "
                    />
                </div>
                <div class="fans-data">
                    <div class="fans-list">
                        <div class="fans-head">
                            <p class="fans-head-title">精英新增粉丝排名</p>
                            <div class="container-time">
                                <p class="container-time-text">选择日期:</p>
                                <el-date-picker
                                    v-model="add_fans_filter.date"
                                    type="datetimerange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    :default-time="['00:00:00', '23:59:59']"
                                    size="small"
                                    @change="fnFilterData(2)"
                                />
                            </div>
                        </div>
                        <el-table
                            :data="addFansList"
                            height="250px"
                            max-height="530px"
                            style="width: 100%;"
                            border
                        >
                            <el-table-column
                                label="序号"
                                align="center"
                                type="index"
                            />
                            <el-table-column
                                prop="true_name"
                                label="精英姓名"
                                align="center"
                                show-overflow-tooltip
                                :formatter="emptyFormatter"
                            />
                            <el-table-column
                                prop="invite_code"
                                label="邀请码"
                                align="center"
                                show-overflow-tooltip
                                :formatter="emptyFormatter"
                            />
                            <el-table-column
                                prop="school_name"
                                label="所属学校"
                                align="center"
                                show-overflow-tooltip
                                :formatter="emptyFormatter"
                            />
                            <el-table-column
                                prop="student_no"
                                label="用户ID"
                                align="center"
                                show-overflow-tooltip
                                :formatter="emptyFormatter"
                            />
                            <el-table-column
                                prop="fans_count"
                                label="新增粉丝数"
                                align="center"
                                show-overflow-tooltip
                                :formatter="emptyFormatter"
                            />
                        </el-table>
                    </div>
                    <div class="fans-list">
                        <div class="fans-head">
                            <p class="fans-head-title">精英一级粉丝数量排名</p>
                            <div class="container-time">
                                <p class="container-time-text">选择日期:</p>
                                <el-date-picker
                                    v-model="fans_rang_filter.date"
                                    type="datetime"
                                    placeholder="选择日期时间"
                                    :disabled="fans_rang_filter.date_slot !== ''"
                                    @change="fnChangeDate(6)"
                                    :clearable="false"
                                    size="small"
                                />
                            </div>
                        </div>
                        <el-table
                            :data="fansRangList"
                            height="250px"
                            max-height="530px"
                            style="width: 100%;"
                            border
                        >
                            <el-table-column
                                label="序号"
                                align="center"
                                type="index"
                            />
                            <el-table-column
                                prop="true_name"
                                label="精英姓名"
                                align="center"
                                show-overflow-tooltip
                                :formatter="emptyFormatter"
                            />
                            <el-table-column
                                prop="invite_code"
                                label="邀请码"
                                align="center"
                                show-overflow-tooltip
                                :formatter="emptyFormatter"
                            />
                            <el-table-column
                                prop="school_name"
                                label="所属学校"
                                align="center"
                                show-overflow-tooltip
                                :formatter="emptyFormatter"
                            />
                            <el-table-column
                                prop="student_no"
                                label="用户ID"
                                align="center"
                                show-overflow-tooltip
                                :formatter="emptyFormatter"
                            />
                            <el-table-column
                                prop="fans_count"
                                label="粉丝数量"
                                align="center"
                                show-overflow-tooltip
                                :formatter="emptyFormatter"
                            />
                        </el-table>
                    </div>
                </div>
            </div>
            <div v-if="true">
                <!-- 占位 -->
                <div style="width:100%;height:12px;background:#F0F2F5"/>
                <div class="contaier-box-wrap">
                    <shopHead
                        :title="elite.profit"
                        :elite=" 'elite' "
                    />
                </div>
                <div class="fans-data">
                    <div class="fans-list-width">
                        <div class="fans-head">
                            <p class="fans-head-title">精英收益排名</p>
                            <div class="container-time">
                                <p class="container-time-text">选择日期:</p>
                                <el-date-picker
                                    v-model="profit_filter.date"
                                    type="datetimerange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    :default-time="['00:00:00', '23:59:59']"
                                    size="small"
                                    @change="fnFilterData(3)"
                                />
                            </div>
                        </div>
                        <el-table
                            :data="profitList"
                            height="250px"
                            max-height="530px"
                            style="width: 100%;"
                            border
                        >
                            <el-table-column
                                label="序号"
                                align="center"
                                type="index"
                            />
                            <el-table-column
                                prop="true_name"
                                label="精英姓名"
                                align="center"
                                show-overflow-tooltip
                                :formatter="emptyFormatter"
                            />
                            <el-table-column
                                prop="invite_code"
                                label="邀请码"
                                align="center"
                                show-overflow-tooltip
                                :formatter="emptyFormatter"
                            />
                            <el-table-column
                                prop="school"
                                label="所属学校"
                                align="center"
                                show-overflow-tooltip
                                :formatter="emptyFormatter"
                            />
                            <el-table-column
                                prop="student_no"
                                label="用户ID"
                                align="center"
                                show-overflow-tooltip
                                :formatter="emptyFormatter"
                            />
                            <el-table-column
                                prop="rebate_money"
                                label="累计收益"
                                align="center"
                                show-overflow-tooltip
                                :formatter="emptyFormatter"
                            >
                                <template slot-scope="scope">
                                    <p v-if="scope.row.rebate_money">
                                        {{ Number(scope.row.rebate_money) }}
                                    </p>
                                    <p v-else>
                                        --
                                    </p>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
        </div>
        <!-- 图片预览 -->
        <img-preview ref="preview" />
    </div>
</template>

<script>
import { back } from '@/mixin/back';
import shopHead from '@/components/shop-head';
import imgPreview from '@/components/common/img-preview';
import { getDate } from '@/assets/js/utils';
export default {
    mixins: [back],
    components: {
        shopHead,
        imgPreview
    },
    data () {
        return {
            elite: {
                elite_market: '校园精英大盘',
                grand: '精英等级数据',
                fans: '精英粉丝数据',
                profit: '精英收益排名',
                addSchoolNumber: '新增校园精英总数'
            },
            //精英收益数据
            profitList: [],
            profit_filter: {
                date: [
                    this.getDate(0),
                    this.getDate(1)
                ]
            },
            //精英一级粉丝数量排名
            fansRangList: [],
            fans_rang_filter: {
                date: this.getDate(0),
                date_slot: ''
            },
            //精英新增粉丝排名
            addFansList: [],
            add_fans_filter: {
                date: [
                    this.getDate(0),
                    this.getDate(1)
                ]
            },
            //精英各个等级新增数据
            eachGrandList: {},
            each_grand_filter: {
                date: [
                    this.getDate(0),
                    this.getDate(1)
                ]
            },
            //精英等级数据
            grandList: {},
            grand_filter: {
                date: this.getDate(0),
                date_slot: ''
            },
            //新增校园精英总数
            addEliteList: [],
            add_elite_filter: {
                date: this.getDate(0),
                date_slot: ''
            },
            addEliteObject: {
                select: {
                    agent_count: 0,
                    school_count: 0
                },
                yesterday: {
                    agent_count: 0,
                    school_count: 0
                }
            },
            add_page: {
                now_page: 1,
                total_count: 0,
                page_size: 0
            },
            //精英数据大盘/精英覆盖的学校
            eliteTime: '',
            eliteList: [],
            isNowDay: true,
            eliteCount: {
                select: {
                    agent_count: 0,
                    school_count: 0
                },
                yesterday: {
                    agent_count: 0,
                    school_count: 0
                }
            },
            elite_filter: {
                date: this.getDate(0),
                date_slot: ''
            },
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 0
            },
            //筛选字段
            dateList: [{
                value: '',
                label: '时间段'
            },{
                value: '1',
                label: '上周'
            },{
                value: '2',
                label: '本周'
            },{
                value: '3',
                label: '上月'
            },{
                value: '4',
                label: '本月'
            }],
            //省市数据
            city: '', //精英覆盖的学校
            add_city: '', //新增学校详情
            cityList: [],
            //记录新增学校详情时间
            add_school_time: [],
            school_time: [],
            //权限
            authResult: {}
        };
    },
    filters: {
        isNaN (val) {
            if (isNaN(val)) {
                return 0;
            } else {
                return val;
            }
        }
    },
    computed: {},
    watch: {},
    mounted () {
        this.$store.commit('SET_HEADER', [{ title: "APP后台"},{title: '校园精英数据'}]);
        this.authResult = this.$route.meta.authResult;
        this.init();
        console.log(this.authResult, '列表权限');
    },
    methods: {
        init () {
            this.eliteTime = this.getDate(1);
            this.getSchoolData(this.getDate(1));//校园精英大盘
            this.getSchoolCoveList(this.getDate(0), this.getDate(1), '', '', '', this.page.now_page);//精英覆盖的学校
            this.getSchoolNumber(this.getDate(0), this.getDate(1));//新增校园精英总数
            this.getSchoolCoveDesc(this.getDate(0), this.getDate(1));//新增学校详情
            this.getGrandList(this.getDate(1));//精英等级数据
            this.getEachGrandList(this.getDate(0), this.getDate(1));//精英各个等级新增数据
            this.getAddFansList(this.getDate(0), this.getDate(1));//精英新增粉丝排名
            this.getFansRangeList(this.getDate(1));//精英一级粉丝数量排名
            this.getSchoolTree();
            this.getprofitList(this.getDate(0), this.getDate(1));//精英收益排名

            //加载默认时间
            this.school_time = [this.getDate(1)];
            this.add_school_time = [
                this.getDate(0),
                this.getDate(1)
            ];
        },

        /**
         * 获取省/市/学校三级联动
         */
        getSchoolTree () {
            this.$post('/student/local_info%5Cschool_tree',{},resp => {
                if (resp.code == 1) {
                    let list = resp.data.tree,
                        cityList = [],
                        data = [{
                            value: '',
                            label: '全部',
                            children: [{
                                value: '',
                                label: '全部',
                            }]
                        }];

                    for(let i=0; i<list.length; i++) {
                        cityList.push({
                            value: list[i].id,
                            label: list[i].name,
                            children: []
                        });
                        if(list[i].children) {
                            list[i].children.map(item=>{
                                cityList[i].children.push({
                                    value: item.id,
                                    label: item.name
                                });
                            });
                        }
                    }

                    data = data.concat(cityList);
                    this.cityList = data;
                } else {
                    this.$message({
                        type: 'warning',
                        message: resp.msg
                    });
                }
            });
        },

        /**
         * 选择省市
         */
        handleChange (type) {
            if(type == 1) {
                this.getSchoolCoveList(this.school_time.length > 0 ? (this.school_time[0] - 86400000) : '', !this.city[1] ? '' : (this.school_time.length > 0 ? this.school_time[0] : ''), this.city ? this.city[0]: '', this.city ? this.city[1]: '', '', this.page.now_page);
                this.getSchoolData(this.school_time.length > 0 ? this.school_time[0] : '', this.city ? this.city[0]: '', this.city ? this.city[1]: '', '');
            } else if(type == 2) {
                this.getSchoolCoveDesc(this.add_school_time.length > 0 ? this.add_school_time[0] : '', this.add_school_time.length > 0 ? this.add_school_time[1] : '', this.add_city ? this.add_city[0] : '', this.add_city ? this.add_city[1] : '', '');
            }
        },

        /**
         * 选择日期
         * 1:精英大盘/精英覆盖的学校
         * 2:新增校园精英总数
         * 3:精英等级数据
         * 4:精英各个等级新增数据
         * 5:精英新增粉丝排名
         * 6:精英一级粉丝数量排名
         * 7:精英收益排名
         */
        fnChangeDate (type) {
            const time_stamp = 60 * 60 * 24 * 1000;

            if (type == 1) {
                let temp = this.setDate(new Date(this.elite_filter.date).getTime());

                if(this.elite_filter.date === null) {//清除日期，获取所有数据
                    this.eliteTime = '';
                    this.school_time = [];
                    this.getSchoolData('', this.city ? this.city[0]: '', this.city ? this.city[1]: '', '');
                    this.getSchoolCoveList('', '', this.city ? this.city[0]: '', this.city ? this.city[1]: '', '', this.page.now_page);
                    return;
                }

                this.isNowDay = temp == this.getDate(0) ? true : false; //是否显示昨日数据
                this.eliteTime = temp + time_stamp;
                this.getSchoolData(temp + time_stamp, this.city ? this.city[0]: '', this.city ? this.city[1]: '', '');
                this.getSchoolCoveList(temp, temp + time_stamp, this.city ? this.city[0]: '', this.city ? this.city[1]: '', '', this.page.now_page);
                this.school_time = [
                    temp + time_stamp
                ];
                this.eliteTime = temp + time_stamp;
            } else if (type == 2) {
                let temp = this.setDate(new Date(this.add_elite_filter.date).getTime());

                this.add_school_time =[
                    temp,
                    temp + time_stamp
                ];
                this.getSchoolNumber(temp, temp + time_stamp);
                this.getSchoolCoveDesc(temp, temp + time_stamp, this.add_city ? this.add_city[0] : '', this.add_city ? this.add_city[1] : '', '');
            } else if (type == 3) {
                let temp = this.setDate(new Date(this.grand_filter.date).getTime());

                this.getGrandList(temp + time_stamp);
            } else if (type == 6) {
                let temp = this.setDate(new Date(this.fans_rang_filter.date).getTime());

                this.getFansRangeList(temp + time_stamp);
            }
        },

        /**
         * 时间段
         * date_slot: 1_上周 2_本周 3_上月 4_本月
         */
        fnGetDate (type) {
            let temp = this.getMondayTemp(); //本周一时间戳
            let book_temp = this.getMonthtemp(1); //本月一号零点时间戳
            let prev_temp = this.getMonthtemp(0); //上月一号零点时间戳
            let temp_stamp = 60 * 60 * 24 * 1000 * 7;

            if (type == 2) {
                if (this.add_elite_filter.date_slot == '1') {
                    this.getSchoolNumber(temp - temp_stamp, temp);
                    this.getSchoolCoveDesc(temp - temp_stamp, temp, this.add_city ? this.add_city[0] : '', this.add_city ? this.add_city[1] : '', '');
                    this.add_school_time =[
                        temp - temp_stamp,
                        temp
                    ];
                } else if (this.add_elite_filter.date_slot == '2') {
                    this.getSchoolNumber(temp, this.getDate(1));
                    this.getSchoolCoveDesc(temp, this.getDate(1), this.add_city ? this.add_city[0] : '', this.add_city ? this.add_city[1] : '', '');
                    this.add_school_time =[
                        temp,
                        this.getDate(1)
                    ];
                } else if (this.add_elite_filter.date_slot == '3') {
                    this.getSchoolNumber(prev_temp, book_temp);
                    this.getSchoolCoveDesc(prev_temp, book_temp, this.add_city ? this.add_city[0] : '', this.add_city ? this.add_city[1] : '', '');
                    this.add_school_time =[
                        prev_temp,
                        book_temp
                    ];
                } else if (this.add_elite_filter.date_slot == '4') {
                    this.getSchoolNumber(book_temp, this.getDate(1));
                    this.getSchoolCoveDesc(book_temp, this.getDate(1), this.add_city ? this.add_city[0] : '', this.add_city ? this.add_city[1] : '', '');
                    this.add_school_time =[
                        book_temp,
                        this.getDate(1)
                    ];
                } else if(this.add_elite_filter.date_slot == '') {
                    this.add_elite_filter.date = this.getDate(0);
                    this.getSchoolNumber(this.getDate(0), this.getDate(1));
                    this.getSchoolCoveDesc(this.getDate(0), this.getDate(1), this.add_city ? this.add_city[0] : '', this.add_city ? this.add_city[1] : '', '');
                    this.add_school_time =[
                        this.getDate(0),
                        this.getDate(1)
                    ];
                }
            }
        },

        /**
         * 数据筛选
         */
        fnFilterData (type) {
            if(type == 1) {//精英各个等级新增数据
                if(this.each_grand_filter.date === null || this.each_grand_filter.date == '' || this.each_grand_filter.date.length < 1) {
                    this.getEachGrandList(this.getDate(0), this.getDate(1));
                }else {
                    this.getEachGrandList(getDate(new Date(this.each_grand_filter.date[0])) * 1000, getDate(new Date(this.each_grand_filter.date[1])) * 1000);
                }
            } else if (type == 2) {//精英新增粉丝排名
                if(this.add_fans_filter.date === null || this.add_fans_filter.date == '' || this.add_fans_filter.date.length < 1) {
                    this.getAddFansList(this.getDate(0), this.getDate(1));
                }else {
                    this.getAddFansList(getDate(new Date(this.add_fans_filter.date[0])) * 1000, getDate(new Date(this.add_fans_filter.date[1])) * 1000);
                }
            } else if (type == 3) {//精英收益排名
                if(this.profit_filter.date === null || this.profit_filter.date == '' || this.profit_filter.date.length < 1) {
                    this.getprofitList(this.getDate(0), this.getDate(1));
                }else {
                    this.getprofitList(getDate(new Date(this.profit_filter.date[0])) * 1000, getDate(new Date(this.profit_filter.date[1])) * 1000);
                }
            }
        },

        /**
         * 导出数据
         */
        fnExportSchooldData () {
            let base = this.$baseUrl;
            let ticket = localStorage.getItem('sessionTicket');
            let temp = this.setDate(new Date(this.elite_filter.date).getTime());
            let start_time = this.school_time[0] == this.getDate(1) ? (this.getDate(0) / 1000) : temp / 1000;

            // console.log(start_time * 1000, this.school_time[0]);

            let url = `${base}/student/statistic_stuagent%5Cexport_school_stuagent_stat?start_time=${start_time}&end_time=${this.school_time.length > 0 ? (this.school_time[0] / 1000) : ''}&province_id=${this.city ? this.city[0]: ''}&city_id=${this.city ? this.city[1]: ''}&school_id=&page_id=${this.page.now_page}&__ticket=${ticket}`;


            window.open(url);
        },

        /**
         * 校园精英大盘
         */
        getSchoolData (end_time, province_id, city_id, school_id) {
            this.$post('/student/statistic_stuagent%5Cget_stuagent_stat', {
                end_time: end_time ? end_time / 1000 : '',
                province_id: province_id,
                city_id: city_id,
                school_id: school_id
            }, resp => {
                if (resp.code == 1) {
                    this.eliteCount = resp.data;
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 精英覆盖学校
         */
        getSchoolCoveList (start_time, end_time, province_id, city_id, school_id, page) {
            this.$post('/student/statistic_stuagent%5Cget_school_stuagent_stat', {
                start_time: start_time / 1000,
                end_time: this.eliteTime ? parseInt(this.eliteTime / 1000) : (new Date().getTime() / 1000),
                province_id: province_id,
                city_id: city_id,
                school_id: school_id,
                page_id: this.page.now_page || page
            }, resp => {
                if (resp.code == 1) {
                    this.eliteList = resp.data.list;
                    this.page.now_page = resp.data.page.now_page;
                    this.page.total_count = resp.data.page.total_count;
                    this.page.page_size = resp.data.page.page_size;
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 新增校园精英总数
         */
        getSchoolNumber (start_time, end_time) {
            this.$post('/student/statistic_stuagent%5Cget_increase_stuagent_stat', {
                start_time: start_time / 1000,
                end_time: end_time / 1000
            }, resp => {
                if (resp.code == 1) {
                    this.addEliteObject = resp.data;
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 新增学校详情
         */
        getSchoolCoveDesc (start_time, end_time, province_id, city_id, school_id) {
            this.$post('/student/statistic_stuagent%5Cget_increase_school_stuagent_stat', {
                start_time: start_time ? start_time / 1000 : '',
                end_time: end_time ? end_time / 1000 : '',
                province_id: province_id ? province_id : '',
                city_id: city_id ? city_id : '',
                school_id: school_id ? school_id : ''
            }, resp => {
                if (resp.code == 1) {
                    this.addEliteList = resp.data.list;
                    this.add_page.now_page = resp.data.page.now_page;
                    this.add_page.total_count = resp.data.page.total_count;
                    this.add_page.page_size = resp.data.page.page_size;
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 精英等级数据
         */
        getGrandList (start_time) {
            this.$post('/student/statistic_stuagent%5Cget_level_stuagent_stat', {
                end_time: start_time ? start_time / 1000 : '',
                province_id: '',
                city_id: '',
                school_id: ''
            }, resp => {
                if (resp.code == 1) {
                    this.grandList = {
                        ...resp.data
                    };
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 精英等级新增数据
         */
        getEachGrandList (start_time, end_time) {
            this.$post('/student/statistic_stuagent%5Cget_increase_level_stuagent_stat', {
                start_time: start_time / 1000,
                end_time: end_time / 1000,
                province_id: '',
                city_id: '',
                school_id: ''
            }, resp => {
                if (resp.code == 1) {
                    this.eachGrandList = {
                        ...resp.data
                    };
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 获取精英新增粉丝排名
         */
        getAddFansList (start_time, end_time) {
            this.$post('/student/statistic_stuagent%5Cget_increase_stuagent_fans_rank', {
                start_time: start_time ? start_time / 1000 : '',
                end_time: end_time ? end_time / 1000 : ''
            }, resp => {
                if (resp.code == 1) {
                    this.addFansList = resp.data.list;
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 获取一级粉丝数量排名
         */
        getFansRangeList (end_time) {
            this.$post('/student/statistic_stuagent%5Cget_stuagent_fans_rank', {
                end_time: end_time ? end_time / 1000 : ''
            }, resp => {
                if (resp.code == 1) {
                    this.fansRangList = resp.data.list;
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 获取精英收益排名
         */
        getprofitList (start_time, end_time) {
            this.$post('/student/statistic_stuagent%5Cget_stuagent_rebate_rank', {
                start_time: start_time / 1000,
                end_time: end_time / 1000
            }, resp => {
                if (resp.code == 1) {
                    this.profitList = resp.data.list;
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 获取指定日期时间戳
         */
        getDate (day) {
            let tempDate = new Date();
            let retult_milliseconds = tempDate.getTime() + 1000 * 60 * 60 * 24 * day;

            tempDate.setTime(retult_milliseconds);

            let result_Year = tempDate.getFullYear(),
                result_Month = (tempDate.getMonth() + 1).toString(),
                result_Date = tempDate.getDate().toString();

            if (result_Month.length === 1) {
                result_Month = "0" + result_Month;
            }

            if (result_Date.length === 1) {
                result_Date = "0" + result_Date;
            }

            let date = result_Year + "-" + result_Month + "-" + result_Date + " " + "00:00:00";

            return new Date(date).getTime();
        },

        /**
         * 日期转换
         */
        setTemp (temp) {
            let year = new Date(temp * 1000).getFullYear(),
                month = new Date(temp * 1000).getMonth() + 1,
                day = new Date(temp * 1000).getDate();

            month = month < 10 ? '0' + month : month;
            day = day < 10 ? '0' + day : day;

            return year + '-' + month + '-' + day;
        },

        /**
         * 当天时间戳转当日0点时间戳
         */
        setDate (no) {
            let year = new Date(no).getFullYear(),
                month = new Date(no).getMonth()+1,
                day = new Date(no).getDate();

            month = month < 10 ? '0' + month : month;
            day = day < 10 ? '0' + day : day;

            let date = year + '-' + month + '-' + day + ' ' + '00:00:00';

            return new Date(date).getTime();
        },

        /**
         * 获取本周周一零点时间戳
         */
        getMondayTemp () {
            let date = new Date().getDay();
            let temp = null;

            switch (date % 7) {
                case 1:
                    temp = this.getDate(0);
                    break;
                case 2:
                    temp = this.getDate(-1);
                    break;
                case 3:
                    temp = this.getDate(-2);
                    break;
                case 4:
                    temp = this.getDate(-3);
                    break;
                case 5:
                    temp = this.getDate(-4);
                    break;
                case 6:
                    temp = this.getDate(-5);
                    break;
                case 0:
                    temp = this.getDate(-6);
                    break;
                default:
                    break;
            }
            return temp;
        },

        /**
         * 获取本月/上月一号0点时间戳
         * param: 1_本月 0:上月
         */
        getMonthtemp (param) {
            let year = new Date().getFullYear(),
                month = new Date().getMonth() + 1;

            if (param == 0) {
                if (month - 1 == 0) {
                    month = 12;
                    year = year - 1;
                } else {
                    month = month - 1;
                }
            }
            month = month < 10 ? '0' + month : month;

            let date = year + '-' + month + '-01' + ' ' + '00:00:00';

            return new Date(date).getTime();
        },

        /**
         * 时间戳转小时
         */
        gethous (temp) {
            let h = new Date(temp * 1000).getHours(),
                m = new Date(temp * 1000).getMinutes(),
                s = new Date(temp * 1000).getSeconds();

            h = h < 10 ? '0' + h : h;
            m = m < 10 ? '0' + m : m;
            s = s < 10 ? '0' + s : s;

            return h + ':' + m + ':' + s;
        },

        /**
         * 设置表头
         */
        renderHeader(h, {}){
            return h('span', {}, [
                h('span', {}, ''),
                h('el-popover', { props: { placement: 'top-start', width: '240', trigger: 'hover', content: '' }}, [
                    h('i', { slot: 'reference', class:'el-icon-hand-tishi iconfont'}, '')
                ])
            ]);
        },

        /**
         * 查看图片
         */
        fnShowPreview(images) {
            this.$refs.preview.show([images]);
        },

        /**
         * 过滤函数
         */
        emptyFormatter(row, column, val) {
            if (!val) return '--';
            return val;
        }
    }
};
</script>

<style lang="less" scoped>
    .container {
        background-color: #F0F2F5;
        padding: 0 12px 5px 12px;
        display: flex;
        flex-direction: column;
        position: relative;
        width: 100%;
        height: 100%;
        .container-box {
            margin: 12px 0 12px 0;
            box-sizing: border-box;
            background: #ffffff;
            width: 100%;
            flex: 1;
            padding-bottom: 35px;
            .contaier-box-wrap {
                width: 100%;
                display: flex;
                padding: 0 24px;
                box-sizing: border-box;
                height: 68px;
                align-items: center;
                border-bottom: 1px #F1F3F6 solid;
                .container-time {
                    display: flex;
                    align-items: center;
                    .container-time-text {
                        font-size: 14px;
                        color: #333333;
                        margin-right: 8px;
                        white-space: nowrap;
                    }
                }
            }
            .container-box-content {
                width: 100%;
                padding: 32px 0;
                box-sizing: border-box;
                display: flex;
                align-items: center;
                justify-content: space-between;
                border-bottom: 1px #F1F3F6 solid;
                .conatiner-content-list {
                    width: calc((100%- 6px) / 2);
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    .container-list-title {
                        font-size: 16px;
                        font-weight: 500;
                        height: 16px;
                        margin-bottom: 12px;
                    }
                    .container-list-number {
                        font-size: 32px;
                        color: #333333;
                        height: 32px;
                        display: flex;
                        align-items: center;
                        .container-list-desc {
                            font-size: 14px;
                            color: #333333;
                            margin-left: 5px;
                            margin-top: 8px;
                        }
                    }
                    .container-list-esat {
                        margin: 8px 0 12px 0;
                        width:280px;
                        height:1px;
                        background:rgba(241,243,246,1);
                    }
                    .container-list-prev {
                        font-size: 14px;
                        color: #333333;
                    }
                }
            }
            .container-cover {
                display: flex;
                flex-direction: column;
                padding: 0 24px 32px 24px;
                box-sizing: border-box;
                .container-wrap-header {
                    display: flex;
                    justify-content: space-between;
                }
                .container-cover-title {
                    padding: 24px 0 ;
                    font-size: 16px;
                    color: #333333;
                    font-weight: 500;
                }
                .container-wrap-right {
                    display: flex;
                    align-items: center;
                }
                .table-head {
                    width: 100%;
                    height: 44px;
                    display: flex;
                    align-items: center;
                    // padding: 0 24px;
                    justify-content: space-between;
                    background: #F4F4F4;
                    color: #333;
                    cursor: pointer;
                    .table-head-list-type {
                        width: 28px;
                        margin: 0 10px;

                    }
                    .table-head-list {
                        width: calc( (100% - 48px) / 4 );
                        padding: 0 10px;
                        text-align: center;
                        white-space: nowrap;
                        position: relative;
                        .el-icon-hand-shaixuan1 {
                            color: #999999;
                            font-size: 14px;
                            &:hover {
                                color: #1890FF;
                            }
                        }
                        .container-provide {
                            position: absolute;
                            left: 66%;
                            top: 12px;
                            background: #ffffff;
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            border: 0 8px 8px 8px;
                            z-index: 99999;
                            box-shadow:0px 2px 16px 0px rgba(0,0,0,0.2);
                            max-height: 200px;
                            overflow: hidden;
                            overflow-y: auto;
                            &::-webkit-scrollbar {
                                width: 3px;
                            }
                            .container-provide-list-head {
                                width: 132px;
                                height: 30px;
                                text-align: center;
                                line-height: 30px;
                                color: #333333;
                                font-size: 14px;
                                border-bottom: 1px #F1F3F6 solid;
                            }
                            .container-provide-list {
                                width: 132px;
                                height: 30px;
                                text-align: center;
                                line-height: 30px;
                                color: #333333;
                                font-size: 14px;
                                border-bottom: 1px #F1F3F6 solid;
                                &:hover {
                                    color: #1890FF;
                                }
                            }
                        }
                    }
                }
            }
            .container-add {
                padding-left: 24px;
                .container-add-wrap {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding-right: 24px;
                    border-bottom: 1px #F1F3F6 solid;
                    .container-add-title {
                        margin: 24px 0 18px 0;
                        font-size: 16px;
                        color: #333333;
                        font-weight: 500;
                    }
                    .container-add-right {
                        display: flex;
                        align-items: center;
                    }
                }
                .container-number {
                    width: calc( (100% - 63px) / 2 );
                    height: 312px;
                    margin: 24px 0px 32px 0px;
                    box-sizing: border-box;
                    display: flex;
                    align-items: center;
                    margin-right: 63px;
                    .container-box-content {
                        padding: 32px 0;
                        box-sizing: border-box;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        border:1px solid rgba(240,242,245,1);
                        .container-line {
                            width:1px;
                            height:236px;
                            background:rgba(240,242,245,1);
                        }
                        .conatiner-content-list {
                            width: calc((100%- 6px) / 2);
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            .container-list-title {
                                font-size: 16px;
                                font-weight: 500;
                                height: 16px;
                                margin-bottom: 12px;
                                color: #333;
                            }
                            .container-list-number {
                                font-size: 32px;
                                color: #333333;
                                height: 32px;
                                display: flex;
                                align-items: center;
                                .container-list-desc {
                                    font-size: 14px;
                                    color: #333333;
                                    margin-left: 5px;
                                }
                            }
                            .container-list-esat {
                                margin: 8px 0 12px 0;
                                width: 212px;
                                height:1px;
                                background:rgba(241,243,246,1);
                            }
                            .container-list-prev {
                                font-size: 14px;
                                color: #333333;
                            }
                        }
                    }
                }
                .container-desc {
                    width: calc( (100% - 63px) / 2 );
                    height: 312px;
                    display: flex;
                    flex-direction: column;
                    margin-top: 24px;
                    margin-right: 24px;
                    .container-desc-head {
                       display: flex;
                       height: 32px;
                       align-items: center;
                       justify-content: space-between;
                       margin-bottom: 5px;
                       .container-desc-title {
                           color: #333333;
                           font-size: 16px;
                           font-weight: 500;
                       }
                       .container-wrap-right {
                            display: flex;
                            align-items: center;
                        }
                    }
                }
            }
            .zd-data {
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                background: #ffffff;
                padding-bottom: 50px;
                .zd-list {
                    width: calc(100% / 4);
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    padding: 50px 0 0px 0;
                    box-sizing: border-box;
                    .zd-head {
                        height: 20px;
                        display: flex;
                        align-items: center;
                        .zd-head-title {
                            font-size: 16px;
                            color: #333;
                            font-weight: 500;
                        }
                        .el-button {
                            width:10px;
                            border: none !important;
                            margin: -3px 0 0 -15px !important;
                            background: transparent !important;
                        }
                        .el-button:hover {
                            background: transparent !important;
                        }
                    }
                    .zd-content {
                        height: 38px;
                        line-height: 38px;
                        color: #333333;
                        font-size: 32px;
                        margin-top: 10px;
                        display: flex;
                        align-items: center;
                        .zd-content-text {
                            font-size: 14px;
                            margin-top: 8px;
                            margin-left: 3px;
                        }
                    }
                }
            }
            .fans-data {
                width: 100%;
                min-height: 200px;
                max-height: 690px;
                overflow: hidden;
                overflow-y: auto;
                display: flex;
                box-sizing: border-box;
                padding: 16px 24px 20px 24px;
                .fans-list, .fans-list-width {
                    width: calc((100% - 48px) / 2);
                    height: 100%;
                    // border: 1px red solid;
                    .fans-head {
                        width: 100%;
                        height: 32px;
                        margin-bottom: 16px;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        .fans-head-title {
                            color: #333333;
                            font-size: 16px;
                            font-weight: 500;
                        }
                        .container-time {
                            display: flex;
                            align-items: center;
                            .container-time-text {
                                font-size: 14px;
                                color: #333333;
                                margin-right: 8px;
                                white-space: nowrap;
                            }
                        }
                    }
                }
                .fans-list-width {
                    width: 100%;
                }
                .fans-list:nth-child(1){
                    margin-right: 48px;
                }
            }
            .contaier-box-wrap {
                width: 100%;
                display: flex;
                padding: 0 24px;
                box-sizing: border-box;
                height: 68px;
                justify-content: space-between;
                align-items: center;
                border-bottom: 1px #F1F3F6 solid;
                .container-time {
                    display: flex;
                    align-items: center;
                    .container-time-text {
                        font-size: 14px;
                        color: #333333;
                        margin-right: 8px;
                        white-space: nowrap;
                    }
                }
            }
            .content_echarts {
                width: 100%;
                height: 280px;
                min-height: 280px;
                padding: 40px 24px 32px 24px;
                box-sizing: border-box;
                border: 1px red solid;
                .echarts {
                    width: 100%;
                    height: 100%;
                }
            }
        }
        /* 字体高亮 */
        .cursor-font {
            color: rgb(64, 158, 255);
            cursor: pointer;
        }
        /* 分页 */
        .pagination-wrapper {
            padding-top: 10px;
            padding-bottom: 10px;
            .el-pagination {
                float: right;
                padding: 0;
                background-color: transparent;
            }
        }
    }
    /* 学习首页指标 */
    .student {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        height: auto;
    }
    .student-home {
        width: 100%;
        display: flex;
        flex-direction: column;
        background: #ffffff;
        padding: 12px 7px 30px 7px;
        margin-bottom: 10px;
        .main-content {
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 9px;
            &-title {
                color: #000000;
                font-size: 14px;
            }
        }
        .main-seat {
            width: 100%;
            height: 1px;
            background: #F4F4F4;
            margin-bottom: 35px;
        }
    }
    .student-home-list {
        width: 50%;
    }
    .main {
        width: 100%;
        display: flex;
    }
    .main-flow {
        width: calc(100% / 2);
        padding: 12px 15px 25px 15px;
        box-sizing: border-box;
        background: #ffffff;
        .main-content {
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 9px;
            &-title {
                color: #000000;
                font-size: 14px;
            }
        }
        .main-seat {
            width: 100%;
            height: 1px;
            background: #F4F4F4;
            margin-bottom: 15px;
        }
    }
    .main-flow-banner {
        width: 100%;
    }
    .main-funnel {
        width: calc((100% - 10px) / 2);
        padding: 12px 15px 30px 15px;
        box-sizing: border-box;
        background: #ffffff;
        margin-left: 10px;
        .main-content {
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 9px;
            &-title {
                color: #000000;
                font-size: 14px;
            }
        }
        .main-seat {
            width: 100%;
            height: 1px;
            background: #F4F4F4;
            margin-bottom: 30px;
        }
        .main-funnel-cont {
            padding: 30px 100px 30px 101px;
            display: flex;
            height: 132px;
            align-items: center;
            justify-content: center;
            .main-cont-list {
                display: flex;
                flex-direction: column;
                align-items: center;
                .main-list-title {
                    color: #000000;
                    font-size: 14px;
                    height: 22px;
                    line-height: 22px;
                    margin-bottom: 10px;
                    white-space: nowrap;
                }
                .main-list-cont {
                    width: 80px;
                    height: 80px;
                    border-radius: 50%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    background: #81DFEA;
                    .main-list-ratio {
                        height: 40px;
                        line-height: 40px;
                        color: #ffffff;
                        font-size: 24px;
                        margin-top: 9px;
                        font-weight: 500;
                    }
                    .main-list-number {
                        height: 22px;
                        line-height: 22px;
                        color: #ffffff;
                        font-size: 14px;
                    }
                }
                .blue {
                    background: #81A8EA;
                }
                .green {
                    background: #64B76D;
                }
                .orig {
                    background: #EAAC50;
                }
                .red {
                    background: #FF7470;
                }
            }
            .main-cont-arrow {
                display: flex;
                height: 100%;
                width: 35px;
                justify-content: center;
                .main-arrow-list {
                    display: flex;
                    height: 13px;
                    align-items: center;
                    margin: 48px 6px 0 8px;
                    .main-arrow-line {
                        width: 20px;
                        height: 1px;
                        background: #D8D8D8;
                    }
                    .main-arrow-delta {
                        width: 0px;
                        height: 0px;
                        border-width: 5px;
                        border-style: solid;
                        border-color: transparent transparent transparent #D8D8D8;
                    }
                }
            }
        }
    }
    /* 数据展示 */

    .zd-data-card .zd-list {
        width: calc(100% / 2);
    }
    .zd-data-five .zd-list {
        width: calc(100% / 5);
    }
    .zd-data-user .zd-list {
        width: calc(100%);
    }
    /* 数据图表 */
    .el-dialog-echarts .content_left {
        background: #ffffff;
        width: 100%;
        height: 100%;
        .content_head {
            width: 100%;
            height: 55px;
            border-bottom: 1px #E8E8E8 solid;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            .content_text {
                font-size: 16px;
                font-weight: bold;
                font-weight: bold;
                padding-left: 24px;
            }
        }
        .content_echarts {
            width: 100%;
            height: 297px;
            // border: 1px red solid;
            box-sizing: border-box;
            .echarts {
                width: 100%;
                height: 100%;
            }
        }
    }
    /* 侧边导航栏 */
    .nav {
        width: 50px;
        display: flex;
        flex-direction: column;
        position: fixed;
        right: 27px;
        top: 233px;
        z-index: 999;
        cursor: pointer;
        .nav-cont {
            display: flex;
            flex-direction: column;
            width: 100%;
            transition: all .2s;
            overflow: hidden;
        }
        .nav-list {
            box-shadow:0px -1px 0px 1px rgba(244,244,244,1);
            font-size: 12px;
            color: #88909C;
            width: 50px;
            height: 50px;
            line-height: 16px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            background: #ffffff;
            box-sizing: border-box;
            padding: 0 7px;
            .nav-width {
                width: 25px;
                line-height: 17px;
            }
        }
        .nav-list-cursor {
            background: #20A0FF;
            color: #ffffff;
        }
        .nav-foot {
            box-shadow:0px -1px 0px 1px rgba(244,244,244,1);
            font-size: 12px;
            color: #88909C;
            width: 50px;
            height: 25px;
            line-height: 16px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            background: #ffffff;
            box-sizing: border-box;
            border-bottom: 1px #F4F4F4 solid;
            .el-icon-hand-xiangshang, .el-icon-hand-xiangxia {
                font-size: 16px;
                color: #88909C;
            }
        }
    }
    /* 总用户大盘 */
    .container-charts {
        width: 100%;
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
    }
    /* 排序 */
    .sort-wrap {
        display: flex;
        align-items: center;
        cursor: pointer;
        .sort-spliter {
            width: 1px;
            height: 12px;
            background: rgba(235, 235, 235, 1);
            margin: 0 10px;
            }
            .btn-sort {
            font-size: 14px;
            line-height: 1;
            color: #ccc;
            &:hover {
                color: #20a0ff;
            }
        }
    }
</style>
<style lang="less">
    .schoolDataAnalusis {
        .el-table__body-wrapper .el-table__body .el-table__row td {
            border: none;
        }
        .el-table__header-wrapper .el-table__header .has-gutter tr th {
            border: none;
        }
        .el-table__header-wrapper {
            border: none;
        }
        .el-table .el-table_1_column_6  .cell {
            position: relative;
        }
        .el-range-editor--small .el-range-separator{
            padding: 0 1px !important;
        }
        .el-color{
            color: rgba(0, 0, 0);
            font-weight: bold;
        }
        .has-gutter th .cell {
            color: #3F454B !important;
            font-weight: 400 !important;
        }
        .el-table--border {
            // border: none;
        }
        .el-table::before {
            left: 0;
            bottom: 0;
            width: 100%;
            height: 0px;
        }
        .el-table td {
            border-bottom: 1px #F1F3F6 solid !important;
        }
        .el-tabs__nav-wrap::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 1px;
            background-color: #EBEEF5;
            z-index: 1;
        }
        .el-table__body-wrapper {
            border-bottom: 1px solid #f0f2f5;
        }
    }
</style>
